<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../common/taglibs.jsp"%>
<%@include file="../common/header_easyui.jsp" %>
<script language="javascript">
    $(document).ready(function () {
        jQuery("#wordGrid").jqGrid({
            url:'${ctx}/word/grid.do',
            datatype: "json",
            colNames:["ID","英文","中文","词汇类型","音标","备注","操作"],
            colModel:[
                {name:'id',index:'id',width:80,align:"center",sortable:false,hidden:true},
                {name:'english',index:'english',width:80,align:"left",sortable:false},
                {name:'chinese',index:'chinese',width:80,align:"left",sortable:false},
                {name:'type',index:'type',width:80,align:"center",sortable:false},
                {name:'voiceSymbol',index:'voiceSymbol',width:80,align:"center",sortable:false},
                {name:'remark',index:'remark',width:80,align:"center",sortable:false},
                {name:'operation',index:'Id',width:80,align:"center",sortable:false}
            ],
            rowNum:15,
            autowidth :true, // 宽度自适应父窗口宽度
            mtype:"POST", // POST GET
            prmNames:{rows:"pageSize", sort:"orderBy", order:"order"}, // 设置翻页、排序参数
            rowList:[15,30,50],
            pager: '#pageWordGrid',
            jsonReader: { repeatitems : false },
            shrinkToFit: true,
//            caption: "单词词库列表",
//            multiselect: true,
            rownumbers: true,
            height: 330,
            gridComplete:function(){  //在此事件中循环为每一行添加修改和删除链接
                var ids=jQuery("#wordGrid").jqGrid('getDataIDs');
                for(var i=0; i<ids.length; i++){
                    var id=ids[i];
                    var operation = "<a href='#' style='color:#f60' onclick='doView(" + id + ")'>查看</a>&nbsp;";
                    operation = "<a href='#' style='color:#f60' onclick='doEdit(" + id + ")'>修改</a>";  //这里的onclick就是调用了上面的javascript函数 Modify(id)
                    operation += "&nbsp;<a href='#'  style='color:#f60' onclick='doDelete(" + id + ")' >删除</a>";
                    jQuery("#wordGrid").jqGrid('setRowData', ids[i], { operation: operation});
                }
            }
        });

        jQuery("#wordGrid").jqGrid('navGrid','#pageWordGrid',{edit:false,add:false,del:false,search:false});

        setGridWidth = function (width){
            jQuery("#wordGrid").setGridWidth(width, true);
        };


//        JORegion.showAll();

        /**
         * 进行校核绑定
         */
        $('#wordForm input').each(function () {
            if ($(this).attr('required') || $(this).attr('validType')) {
                $(this).validatebox();
            }
        });
    });


    function doView(id) {
        openWindow("wordWindow", "查看", "${ctx}/word/view.do?id=" + id, true, "wordGrid",800,430);
    }

    function doAdd(parentId) {
        openWindow("wordWindow", "新增", "${ctx}/word/init.do", true, "wordGrid");
    }


    /**
     *
     * @param id
     */
    function doEdit(id) {
        openWindow("wordWindow", "编辑", "${ctx}/word/init.do?id=" + id, true, "wordGrid");
    }

    function doDelete(id) {
        doGridDelete("${ctx}/word/delete.do?id=" + id, "wordGrid");
    }
</script>

<body class="easyui-layout" style="overflow-y: hidden" scroll="no">
<div region="center" title="单词词库列表" style="width:100%; height:100%; background:#fafafa;overflow-x: hidden; overflow-y: auto;">
    <%--<div id="jo_region_001" title="查询条件" divId="effect1" style="width: 100%">--%>
        <div id="effect1">
            <form id="wordForm" action="">
                <table width="100%">
                    <input type="hidden" value="" id="treeId" name="treeId" op="like" entity="t"/>
                    <tr>
                        <td width="8%" nowrap="nowrap" align="left">
                            英文:
                            <input type="text" id="english" name="english" value="" class="title_input"
                                   op="like" entity="t" isCapital="false" dtype="String"/>
                        </td>
                        <td width="8%" nowrap="nowrap" align="left">
                            中文:
                            <input type="text" id="chinese" name="chinese" value="" class="title_input"
                                   op="like" entity="t" isCapital="false" dtype="String"/>
                        </td>
                        <td>
                            <input type="button" value="查询" class="btn_Search" onclick="javascript:search('wordGrid','wordForm');"/>&nbsp;
                            <input type="button" value="新增" class="btn_Add" onClick="javascript:doAdd(null);"/>
                            <%--<a href="javascript:void(0);" onclick="toggleDiv('advanced_condition', '0')">高级查询</a>--%>
                        </td>
                    </tr>
                </table>
                <div style="display: none;height:30px" id="advanced_condition">

                </div>
            </form>
        </div>
    <%--</div>--%>
    <table id="wordGrid"></table>
    <div id="pageWordGrid"></div>
    <div id="wordWindow"></div>
</div>
</body>
</html>